<template>
  <el-container>
    <el-aside width="550px" style="background-color: #333333" class="all">
      <p class="customer">客服人员</p>
      <div class="customer_card">
        <ul class="customer_card_list">
          <li
            v-for="(item, index) in cardList"
            :key="index"
            class="cardList_style"
          >
            <img
              width="75px"
              height="75px"
              :src="item.cover_show"
              alt=""
              class="avatar_show"
            />
            <div class="info_list">
              <ul>
                <li>姓名：{{ item.name }}</li>
                <li>性别：{{ item.sex }}</li>
                <li>ID：{{ item.id }}</li>
              </ul>
            </div>
            <el-button
              type="text"
              class="message_button"
              @click="handleListEvaluate(item)"
              >我的评价</el-button
            >
            <el-button
              type="text"
              class="message_button"
              @click="handleEvaluate(item)"
              >评价客服</el-button
            >
          </li>
        </ul>
      </div>
    </el-aside>
    <el-main
      width="500px"
      style="background-color: #353b43; overflow-x: hidden"
    >
      <div class="main">
        <p class="filmMessage">影院留言</p>
        <div class="filmMessage_card">
          <ul class="filmMessage_card_list">
            <li
              v-for="(item, index) in filmMessageList"
              :key="index"
              class="filmMessage_style"
            >
              <div class="img_box">
                <img
                  v-if="item.avatar_show != null"
                  width="75px"
                  height="75px"
                  class="av2"
                  :src="item.avatar_show"
                  alt="null"
                />
                <img
                  class="av2"
                  width="75px"
                  height="75px"
                  v-else
                  src="../assets/img/nim.png"
                  alt=""
                />
              </div>
              <div class="info1_list">
                <ul>
                  <li>{{ item.name }}</li>
                  <li class="list2">{{ item.message }}</li>
                  <li>Time：{{ item.time }}</li>
                </ul>
              </div>

              <div v-if="item.reply" class="reply">
                <div class="d2">客服回复：</div>
                <div class="d3">{{ item.reply }}</div>
              </div>
            </li>
          </ul>
          <el-button
            class="btn"
            type="success"
            icon="el-icon-share"
            @click="handleWordEvaluate(item)"
            >添加留言
          </el-button>
        </div>
      </div>
    </el-main>

    <el-dialog title="我的评价" :visible.sync="dialogViewpoint" width="650px">
      <el-table :data="ViewpointTable" style="width: 100%">
        <el-table-column prop="date" label="日期" width="200">
        </el-table-column>
        <el-table-column prop="content" label="评语" width="200">
        </el-table-column>
        <el-table-column property="type" width="180">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.type === '非常满意'" type="success"
              >非常满意</el-tag
            >
            <el-tag v-if="scope.row.type === '满意'" type="info">满意</el-tag>
            <el-tag v-if="scope.row.type === '不满意'" type="danger"
              >不满意</el-tag
            >
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <el-dialog
      title="客服评论"
      :visible.sync="dialogFormVisible"
      width="800px"
      @click="handleEvaluate(item)"
    >
      <el-form :model="form"
        ><el-form-item label="评价等级">
          <el-select v-model="form.region" placeholder="对此留言评价">
            <el-option label="满意" value="满意"></el-option>
            <el-option label="非常满意" value="非常满意"></el-option>
            <el-option label="不满" value="不满意"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="评价内容">
          <el-input
            type="textarea"
            placeholder="请输入内容"
            v-model="textarea1"
            resize="none"
            :rows="8"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false"
          >提交评论</el-button
        >
      </div>
    </el-dialog>

    <el-dialog
      title="添加留言"
      :visible.sync="dialogVisibleword"
      width="800px"
      class="addtitle"
      @click="handleWordEvaluate(item)"
    >
      <el-input
        type="textarea"
        placeholder="请输入内容"
        v-model="textarea1"
        resize="none"
        :rows="8"
      >
      </el-input>
      <div class="footer_btn">
        <el-button @click="dialogVisible = false" class="false_button"
          >取 消</el-button
        >
        <el-button
          type="primary"
          @click="dialogVisible = false"
          class="success_button"
        >
          提交答案
        </el-button>
      </div>
    </el-dialog>
  </el-container>
</template>
<script>
export default {
  data() {
    return {
      cardList: [
        {
          cover_show: require("../assets/img/nim.png"),
          name: "客服1",
          sex: "男",
          id: "01",
        },
        {
          cover_show: require("../assets/img/nim.png"),
          name: "客服2",
          sex: "女",
          id: "02",
        },
        {
          cover_show: require("../assets/img/nim.png"),
          name: "客服3",
          sex: "男",
          id: "03",
        },
      ],
      filmMessageList: [
        {
          avatar_show: require("../assets/img/nim.png"),
          name: "客人1",
          message: "很好",
          time: "2021-06-7",
          // reply: "123456",
        },
        {
          avatar_show: require("../assets/img/avatar.png"),
          name: "客人2",
          message: "非常好",
          time: "2021-08-10",
          reply: "123456",
        },
        {
          avatar_show: require("../assets/img/nim.png"),
          name: "客人3",
          message: "很棒",
          reply: "123456",
          time: "2021-12-9",
        },
        {
          avatar_show: require("../assets/img/nim.png"),
          name: "客人4",
          message: "非常棒",
          time: "2022-01-31",
          reply: "123456",
        },
      ],
      dialogViewpoint: false, //我的评价框显示隐藏
      dialogFormVisible: false,
      dialogVisibleword: false,
      //我点评价表格
      ViewpointTable: [
        {
          date: "2016-05-02",
          content: "非常好",
          type: "非常满意",
        },
        {
          date: "2016-05-02",
          content: "非常好",
          type: "满意",
        },
        {
          date: "2016-05-02",
          content: "非常好",
          type: "不满意",
        },
      ],
      form: {},
      word: {},
      textarea1: "",
    };
  },
  methods: {
    //点击我的评价按钮事件
    handleListEvaluate() {
      this.dialogViewpoint = true;
    },
    handleEvaluate() {
      this.dialogFormVisible = true;
    },
    handleWordEvaluate() {
      this.dialogVisibleword = true;
    },
  },
};
</script>

<style lang="scss">
.all {
  height: 875px;
  .customer {
    width: 350px;
    height: 100px;
    // background: aqua;
    line-height: 100px;
    font-size: 20px;
    font-weight: bold;
    color: #91949c;
    margin-left: 40px;
    //display: inline-block;
  }
  .customer_card {
    width: 350px;
    // background: yellow;
    margin-left: 40px;
    .cardList_style {
      list-style: none;
      width: 350px;
      height: 150px;
      margin-top: 20px;
      padding: 15px;
      color: white;

      // background: red;
      border-bottom: 2px dashed #eee;
    }
    .info_list {
      float: right;
      margin-right: 150px;
      li {
        font-size: 15px;
        margin-top: 5px;
        list-style: none;
      }
    }
    .message_button {
      width: 100px;
      height: 50px;
      margin-top: 20px;
      margin-right: 20px;
      // background: white;
    }
  }
}

.main {
  width: 700px;
  height: 750px;
  // background: pink;
  .filmMessage {
    width: 350px;
    height: 100px;
    padding-top: 13px;
    // background: yellow;
    font-size: 20px;
    font-weight: bold;
    color: #91949c;
    margin-left: 60px;
    //display: inline-block;
  }
  .filmMessage_card {
    width: 350px;
    // background: yellow;
    margin-left: 40px;
    .filmMessage_style {
      float: left;
      list-style: none;
      width: 500px;
      margin-top: 15px;
      padding-left: 20px;
      color: #91949c;
      // background: red;
      // border-bottom: 2px dashed #eee;
      .img_box {
        width: 100px;
        height: 75px;
        margin-bottom: 75px;
        // background: yellow;
        float: left;
      }
      .info1_list {
        width: 200px;
        height: 75px;
        float: left;
        // background: #eee;
        margin-bottom: 75px;

        li {
          font-size: 15px;
          margin-top: 5px;
          list-style: none;
        }
        .list2 {
          color: white;
          font-size: 18px;
        }
      }
      .reply {
        float: right;
        width: 200px;
        height: 75px;
        // background: blueviolet;
      }
    }
  }
  .btn {
    margin-left: 700px;
  }
}

.addtitle {
  font-weight: bold;
  .footer_btn {
    width: 220px;
    height: 50px;
    // background: pink;
    margin-left: 550px;
    margin-top: 20px;
    .el-button {
      margin-left: 20px;
    }
  }
}
</style>